<template>
  <div class="app-container documentation-container">
     <!-- :immediate-check="false"   -->
     
<van-list
  
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="getorders"


>
<div v-for="(item,index) in orders" :key="index" class="orderdiv">
  <div class="orderimg">
      <img :src="item.image" class="itemimg">
  </div>
  <div class="ordercontent">
      <p>{{item.title}}</p>
      <p style="font-size:12px;color:#666666">{{timeformate(item.paymentTime)}}</p>
  </div>
  <div class="orderjiage">
  <p>× {{item.num}}</p>

  </div>
  </div>
 
 
  

</van-list>
  </div>







</template>

<script>
import DropdownMenu from '@/components/Share/DropdownMenu'
import { mapGetters } from 'vuex'
import {Circle, Popup,List} from 'vant'
import Vue from 'vue'
 
import digitaSign from '@/components/page/case/digitaSign';
 Vue.use(Circle);
Vue.use(Popup).use(List)
import { getorders} from "@/api/user";
export default {
  name: 'order',
  components: { DropdownMenu },
    computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'cardname',
      'introduction'
    ])
  },
  data() {
    return {
      orders:[],
      page:1,
      size:100,
      tloading:false,
      loading:false,
      finished:false,
      havesign:false,
      popcontent:null,
      sign:false,
      show2:false,
      show:false,
       currentRate:0,
            rate:100,
            rate2:2,
            text:'',
        uploadImage5: require('@/assets/images/case/signname.png'),
      articleList: [
        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
      ]
    }
  },
  components:{
digitaSign

  },
  mounted(){
    this.getorders();
      // if(sessionStorage.getItem('signpic')&&sessionStorage.getItem('signpic')!='null')
      // {
      //   this.uploadImage5=sessionStorage.getItem('signpic')
      //   this.sign=true;
      // }

  },
  methods:{
      timeformate(value) {
      var data = new Date(value );
      var year = data.getFullYear();
      var mouth =
        data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
      var day = data.getDate() < 9 ? "0" + data.getDate() : data.getDate();
      var hour=data.getHours();
      var minute=data.getMinutes();
      var sec=data.getSeconds();
      if(minute<10)
      minute="0"+minute;
      if(hour<10)
      hour="0"+hour;
      if(sec<10)
      sec="0"+sec;
      return year + "-" + mouth + "-" + day+" "+hour+":"+minute+":"+sec;
    },
 getorders(){
    if(this.tloading==true&&this.page==1)
        {
             console.log("检测到并发情况")
 return;


        }
            this.tloading=true;
      this.$loadingshow();
 getorders({start:(this.page-1)*this.size,length:this.size,draw:1,"search[value]":'',"order[0][column]":4,"order[0][dir]":'desc'}).then(res => {
          this.$loadingclose();
  this.loading = false;
                    if(!res.error)
                    {
               if(res.data.length>=this.size)
          this.page+=1;
          else
          {
              this.finished=true;
          }
          for(var i=0;i<res.data.length;i++)
          {
            this.orders.push(res.data[i])
          }
         
                   
                    }
                    else{
                        this.finished=true;
                   this.$toast('服务器异常')

                    }
    

        
          },
          err=>{
             console.log('error')
    this.$loadingclose();
  this.loading = false;
   this.finished=true;
          }
          );


 },
     showPopup(data) {
            this.popcontent=data;
            // console.log(this.popcontent)
            this.show2 = true;
    },
getimgsrc(data){
      
      this.havesign=true;
       this.uploadImage5=data;
       
      //  console.log("我的图片的地址："+this.imgsrc);
       this.show2 = false;
  

     },
     tijiao()
     {
        if(this.havesign)
            this.uploadqianming(this.uploadImage5);
            else
            this.$toast('您还未签名')
     },
       uploadqianming(base64str){
      
        this.uploadtag=9;
       this.UpladFile(null,base64str);
    },
     UpladFile(fileObj,base64str) {
            // var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
              var form = new FormData(); // FormData 对象
            var isbase64=0;
            // console.log('base64str:'+base64str)
            //  console.log('fileobj:'+fileObj)
            if(base64str)
                  isbase64=1;
            var url =  "/dev-api/mapi/customer/uploadsign" // 接收上传文件的后台地址
            if(fileObj)
            {
          
            form.append("file", fileObj); // 文件对象
            }
            else{
              var dataurl=base64str;
     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
    u8arr[n] = bstr.charCodeAt(n);
}
var obj = new Blob([u8arr], {type:mime});
 
form.append("file", obj,"xysign.png");
            }


            this.xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            this.xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
            this.xhr.onload = this.uploadComplete; //请求完成
            this.xhr.onerror =  this.uploadFailed; //请求失败
         var _this=this;
            this.xhr.upload.onprogress = this.progressFunction;//【上传进度调用方法实现】
            this.xhr.upload.onloadstart = function(){//上传开始执行方法
              // var  ot = new Date().getTime();   //设置上传开始时间
              //  var  oloaded = 0;//设置上传开始时，以上传的文件大小为0
              _this.show=true;
              // _this.$loadingshow();
              _this.rate=100;
              _this.currentRate=0;
              _this.text='';
               
               
            };

            this.xhr.send(form); //开始上传，发送form数据

        },
   //上传成功响应
          uploadComplete(evt) {
            //服务断接收完文件返回的结果
               this.show=false;
               this.$loadingclose();
            var data = JSON.parse(evt.target.responseText);
            // console.log('服务器响应')
            console.log(data)
            if(data.success) {
              console.log('上传成功')
                this.$toast("签约成功！");
                this.sign=true;
                sessionStorage.setItem('signpic',data.result)
                // this.uploadImage5=data.result;
                // this.uploadsuccess(data.result);
            }else{
                this.$toast(data.message);
            }

        },
        //上传失败
          uploadFailed(evt) {
                 this.show=false;
                  this.$loadingclose();
            this.$toast("上传失败！");
        },
        //取消上传
          cancleUploadFile(){
                 this.show=false;
                  this.$loadingclose();
            this.xhr.abort();
        },

  //上传进度实现方法，上传过程中会频繁调用该方法
          progressFunction(evt) {
            // var progressBar = document.getElementById("progressBar");
            // var percentageDiv = document.getElementById("percentage");
            // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
            if (evt.lengthComputable) {//
                // progressBar.max = evt.total;
                 // progressBar.value = evt.loaded;
                // this.rate=evt.total;
               
                this.currentRate = Math.round(evt.loaded / evt.total * 100);
               
                this.text = Math.round(evt.loaded / evt.total * 100) + "%";
                console.log(this.currentRate)
                  if(evt.loaded==evt.total)
                {
                   this.$loadingshow();
                }
            }
            else
            {
            
            }
             
        },

  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
    .orderdiv{
        display: flex;
        justify-content: space-around;
        width: 100%;
        margin-bottom: 20px;
    }
    .orderimg{
        width:100px;
        height: 100px;
        margin-right:20px;
    }
    .itemimg{
        height: 100%;
        width: 100%;
    }
    .ordercontent{
        width: 60%;
    }
    .orderjiage{
        width: 20%;
        text-align: right;

    }
</style>
